<template>
	<section class="scholl" >
		<div class="border-box">
			<ul class="border-b20">
				<li>					
					<div class="size_list pt30rem pb30rem pl30rem pr30rem border-b">
						<span class="fs30rem c333 item-name">姓名：</span>
						<input type="text" placeholder="请输入您的姓名" v-model="form.ture_name">	
					</div>					
				</li>
				<li>					
					<div class="size_list pt30rem pb30rem pl30rem pr30rem border-b">
						<span class="fs30rem c333 item-name">身份证：</span>
						<input type="text" placeholder="请输入您的身份证" v-model="form.id_card">
					</div>					
				</li>				
			</ul>
			<div class="pt30rem pb30rem pl30rem pr30rem">
				<h2 class="fs30rem mb30rem">请上传您的身份证</h2>
				<div class="layout">
					<div class="w50 pr15rem" @click="loadLeft">
						<img class="id-card-img" v-if="form.left_img" :src="form.left_img">
						<img class="id-card-img default" v-else :src="leftImgDefault">
						<input type="file" @change="loadLeftFile" id="leftImg" style="display: none;">
						<p class="align-center fs24rem mt20rem cadadad">点击上传</p>
					</div>
					<div class="w50 pl15rem" @click="loadRigth">
						<img class="id-card-img" v-if="form.right_img" :src="form.right_img">
						<img class="id-card-img default" v-else="form.rightImgDefault" :src="rightImgDefault">
						<input type="file" @change="loadRigthFile" id="rightImg" style="display: none;">
						<p class="align-center fs24rem mt20rem cadadad">点击上传</p>
					</div>
				</div>
			</div>
			<button class="change-pw-btn white fs32rem pt20rem pb20rem w92" @click="submit">确定提交</button>
		</div>
	</section>
</template>

<script>
	import { verifiedByuser } from "@/api/member";
	import { getVerifiedByuser } from "@/api/member";
	import { uploadAvatar } from "@/utils";
	export default{
		data(){
			return{
				form: {
					uid: localStorage.getItem('uid'),
					ture_name: '',
					id_card: '',
					left_img: '',
					right_img: '',					
				},
				leftImgDefault  : require("../../../assets/member/sfz-front.png"),
				rightImgDefault : require("../../../assets/member/sfz-behind.png"),
			}
		},
		methods: {
			loadLeft()
			{ 
				document.getElementById("leftImg").click();	
			},
			loadLeftFile()
			{
				uploadAvatar("leftImg", res => {
					this.form.left_img =  res;
				});
			},
			loadRigth()
			{
				document.getElementById('rightImg').click();
			},
			loadRigthFile()
			{
				uploadAvatar("rightImg", res => {
					this.form.right_img =  res;
				});
			},
			submit()
			{
				verifiedByuser(this.form).then(res => {
					this.$router.go(-1);
				});	
			}	    
		},
		created()
		{	
			if(this.form.length){
				verifiedByuser(this.form).then( res =>{

				});
			}
		}

	}
</script>
<style lang="less">
	.border-box{
		box-sizing: border-box;
		::-webkit-input-placeholder{
		color: #adadad;
			font-size: 28/28rem;
		}    
		:-moz-placeholder{
			color: #adadad;
				font-size: 28/28rem;
		}                  
		::-moz-placeholder{
			color: #adadad;
				font-size: 28/28rem;
		}                 
		:-ms-input-placeholder{
			color: #adadad;
				font-size: 28/28rem;
		}		
		.item-name{
			display: inline-block;
			width: 150/28rem;
		}
		.change-pw-btn{
			display: block;
			background-color: #ff0036;
			border-radius: 5px;
			margin:0 auto;
			margin-top: 50%;
		}
		.cadadad{
			color: #adadad;
		}
		.id-card-img{
			width: 100%;
			height: 240/28rem;
			object-fit: contain;
		}
	}
	.border-box * {
		box-sizing: border-box;
	}

</style>

